<template>
  <div>
    <h1>欢迎光临_Vue开发的收银系统_水果店</h1>
    <h2>苹果{{price}}元/斤，折扣 &lt;{{discount}}折&gt;</h2>
    <p>
      请输入你要购买的斤数 <input type="number" v-model.number="amount">
    </p>
    <button @click="btn">结账买单~</button>
    <h3>结账单</h3>
    <p>总价：¥ {{ totalPrice }}元，折后价：¥ {{ discountPrice }} 元，省了：¥ {{ savePrice }}元</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      discount: 8,
      amount: 0,
      totalPrice: 0,
      discountPrice: 0,
      savePrice:0
    };
  },
  methods: {
    btn(){
      this.totalPrice = this.price * this.amount;
      this.discountPrice = this.price *  this.amount * this.discount * 0.1
      this.savePrice = this.totalPrice - this.discountPrice
    }
  }

};
</script>

<style>
</style>